<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .file-list{
            padding: 20px;
            background: lightblue;
            list-style-type: none;
        }
         .file-list img{
             max-width: 70px;
             vertical-align: middle;
         }
         .file-list .file-item{margin-bottom: 10px}
         .file-list .file-item .file-name{margin-left: 20px}
         .file-list .file-item .file-del{
             color: red;
             margin-left: 200px;}
     </style>
</head>
<body>
    <form >
        <div>
            <input type="file" id="choose-file" multiple>
            <button id="upload">上传</button>
        </div>
        <ul class="file-list">
        </ul>
    </form>
</body>
</html>
<script>




    var $button = $('#upload'),
         //选择文件按钮
         $file = $("#choose-file"),
         //回显的列表
         $list = $('.file-list'),
         //选择要上传的所有文件
         fileList = [],
         sendList = [];
     //当前选择上传的文件
     var curFile ;
     $file.on('change',function(){      
//原生的文件对象，相当于$file.get(0).files[0];
         curFile = this.files;
         console.log('fagzz')
         //将FileList对象变成数组
         fileList = fileList.concat(Array.from(curFile));
         for(var i=0,len = curFile.length;i < len;i++){
             reviewFile(curFile[i],i)
         }

     })
     function reviewFile(file,order){
         //实例化fileReader,
         let  fd = new FileReader();
         //获取当前选择文件的类型
         let fileType = file.type;
         //调它的readAsDataURL并把原生File对象传给它，
         fd.readAsDataURL(file);//base64
         //监听它的onload事件，load完读取的结果就在它的result属性里了

         fd.onload = function(){

             if(/^image\/[jpeg|png|jpg|gif]/.test(fileType)){
                 $list.append('<li class="file-item"><img src="'+this.result+'" alt=""><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>')
             }else{
                 $list.append('<li class="file-item"><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>')
             }
         }
     }
     $(".file-list").on('click','.file-del',function(){
         let $parent = $(this).parent();
         let index = $parent.index();
         fileList.splice(index,1);
         $parent.remove()
     });
     $button.on('click',function(){

    console.log(window.sessionStorage.getItem('username'))
    if(fileList.length>0){
        for(var i=0,len = fileList.length;i < len;i++){
            let formData = new FormData();
            formData.append('file',fileList[i]);
            $.ajax({
                            url:'http://localhost/uppicture?username='+window.sessionStorage.getItem('username'),
                            type:'post',
                            data:formData,
                            processData:false,
                            contentType:false,
                            success:function(data,statusText,headers){
                                if(data.success){
                                    var filed = data.data[0];
                                    console.log("图片个数：")
                                console.log(fileList.length)
                                    sendList.push(filed);
                                }
                                else{
                                console.log("失败")
                            }
                            }
                        })          
            // const xhr=new XMLHttpRequest();
            // xhr.open('POST','http://localhost/upusername');
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // xhr.send('username='+window.sessionStorage.getItem('username'));
            // xhr.onreadystatechange=function(){
            //     // 判断
            //     if(xhr.readyState===4){
            //         if(xhr.status>= 200 && xhr.status<=300){
            //             // 处理服务端返回的结果
            //             console.log("发送上传图片请求")
            //             $.ajax({
            //                 url:'http://localhost/uppicture?username=1234',
            //                 type:'post',
            //                 data:formData,
            //                 processData:false,
            //                 contentType:false,
            //                 success:function(data,statusText,headers){
            //                     if(data.success){
            //                         var filed = data.data[0];
            //                         sendList.push(filed);
            //                     }
            //                 }
            //             })          
            //         }
            //             //window.location.href = "./register.html?username=18870655271";
            //     }
            // }
        }

    }else{
        alert("请选择文件！")
    }
    return false;
})
</script>

